<template>
  <div class="upload-container">
    <van-button
      icon="plus"
      plain
      type="default"
      @click="showPopup"
      class="round-btn"
    ></van-button>
    <!-- 底部弹出 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }"
      ><van-uploader v-model="fileList" multiple />
      <van-button
        class="bottom-btn"
        type="primary"
        size="large"
        @click="showPopup"
        >上传</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const show = ref(false);
    const fileList = ref();
    const showPopup = () => {
      show.value = !show.value;
    };
    return {
      fileList,
      show,
      showPopup,
    };
  },
};
</script>

<style scoped>
.round-btn {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.van-popup--bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>